<template>
  <div class="layout-page bg-#f8f9fe pt-32px">
    <div class="layout-page-inner box-border bg-#fff w-1328px py-70px">
      <h3 class="font-size-24px fw-500 text-center mb-57px">{{ pageTitle }}</h3>
      <el-form
        class="apply-form w-60% mx-auto"
        ref="applyForm"
        :model="formData"
        :rules="rules"
        label-position="right"
        :label-width="130"
      >
        <el-form-item :label="`${keyText}名称`" prop="elementTitle">
          <el-input
            v-model="formData.elementTitle"
            placeholder="请输入名称"
            :maxlength="100"
          ></el-input>
        </el-form-item>
        <el-form-item label="可否共享" prop="elementShareType">
          <el-select
            v-model="formData.elementShareType"
            placeholder="请选择可否共享"
          >
            <el-option
              v-for="option in ELEMENT_SHARE_TYPE_OPTIONS"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可否下载" prop="downloadType">
          <el-select
            v-model="formData.downloadType"
            placeholder="请选择可否下载"
          >
            <el-option label="否" :value="-1"></el-option>
            <el-option label="是" :value="0"></el-option>
            <el-option label="线下协商" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isModel" label="元素框架" prop="elementFrame">
          <el-select
            v-model="formData.elementFrame"
            placeholder="请选择元素框架"
          >
            <el-option
              v-for="option in elementFrameOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option
          ></el-select>
        </el-form-item>
        <el-form-item label="研究方向、领域" prop="elementDomainList">
          <el-checkbox-group v-model="formData.elementDomainList">
            <el-checkbox
              v-for="item in elementDomainOptions"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="标签" prop="elementTagList">
          <el-checkbox-group v-model="formData.elementTagList">
            <el-checkbox
              v-for="item in elementTagOptions"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="描述">
          <Editor ref="remark" v-model="formData.remark" />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            class="mt-36px h-48px w-108px b-rd-0"
            :loading="confirmLoading"
            @click="handleSubmit"
            >确认提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import Editor from "@/components/Editor.vue";
import { useLoading, useDict } from "@/hooks";
import {
  DICT_MAP,
  SOURCE_FROM_OPTIONS,
  ELEMENT_SHARE_TYPE_OPTIONS,
} from "@/const";

const $api = inject("$api");
const { loading: confirmLoading, setLoading } = useLoading();

const router = useRouter();
const route = useRoute();
const isAdd = computed(() => !route.query.id);
const isModel = computed(() => route.name === "CreateModel");
const keyText = computed(() => (isModel.value ? "模型" : "数据集"));
const pageTitle = computed(
  () => `${isAdd.value ? "新增" : "编辑"}${keyText.value}数据`
);

const { list: elementFrameOptions } = useDict(DICT_MAP.element_frame);
const { list: elementDomainOptions } = useDict(DICT_MAP.element_domain);
const { list: elementTagOptions } = useDict(DICT_MAP.element_tag);

const applyForm = ref();
const formData = ref({
  elementTitle: "",
  elementShareType: null,
  downloadType: null,
  elementFrame: null,
  elementDomainList: [],
  elementTagList: [],
  remark: "",
  recommendStatus: 0,
});
const rules = reactive({
  elementTitle: [{ required: true, message: "请输入名称" }],

  elementShareType: [{ required: true, message: "请选择可否共享" }],
  downloadType: [{ required: true, message: "请选择可否下载" }],
  elementFrame: [{ required: true, message: "请选择元素框架" }],
  elementDomainList: [
    { required: true, type: "array", message: "请选择研究方向、领域" },
  ],
  elementTagList: [{ required: true, type: "array", message: "请选择标签" }],
  remark: [{ required: true, message: "请选择描述" }],
});

const handleSubmit = async () => {
  applyForm.value.validate(async (valid) => {
    if (!valid) return;
    setLoading(true);
    try {
      const apiName = isAdd.value ? "createElement" : "updateElement";
      await $api.provide[apiName]({
        ...formData.value,
        elementType: isModel.value ? 2 : 1,
      });
      ElMessage.success(`${isAdd.value ? "创建" : "编辑"}成功`);
      setTimeout(() => {
        router.push(
          `/userCenter?active=${isModel.value ? "model" : "dataSource"}`
        );
      }, 500);
    } catch (e) {
      setLoading(false);
    }
  });
};

const remark = ref();

const getDetail = async (id) => {
  const { data } = await $api.provide.getDetail(id);
  formData.value = data;
  remark.value.setContent(data.remark);
};

onMounted(() => {
  if (route.query.id) getDetail(route.query.id);
});
</script>
